<template>
   <div class="NavBar">
     <ul>
         <router-link tag="li" to="/home" :class="{action : routerName === 'Home'}" >
           <i class="iconfont icon-shouyetianchong"></i>
           <span>首页</span>
         </router-link>
         <router-link tag="li" to="/category" :class="{action : routerName == 'Category'}">
          <i class="iconfont icon-grouping"></i>
          <span>分类</span>
         </router-link>
         <router-link tag="li" to="/cart" :class="{action: routerName === 'Cart'}">
          <i class="iconfont icon-gouwu"></i>
          <span>购物车</span>
         </router-link>
         <router-link tag="li" to="user" :class="{action: routerName === 'User'}">
           <i class="iconfont icon-wode1"></i>
           <span>我的</span>
         </router-link>
     </ul>
   </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      routerName: 'Home'
    }
  },
  watch: {
    $route (to, from) {
      console.log('to==', to, 'from===', from)
      this.routerName = to.name
    }
  }
}
</script>

<style lang = 'less' scoped>
  .NavBar {
     position: fixed;
     bottom: 0;
     width: 100%;
     box-shadow: 10px 10px 20px#666;
     ul {
      display: flex;
      justify-content: space-evenly;
      li {
        flex: 1;
        /* background-color: aqua; */
        text-align: center;
        padding: 10px 0 10px 0;
        i {
          font-size: 24px;
        }
        span {
         display: block;
        }
      }
     }
   }
   .action {
      color: aqua;
   }
</style>
